<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>电商网站导航系统</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" />
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
      }

      :root {
        --primary: #ff3f6c;
        --secondary: #282c3f;
        --accent: #ff3f6c;
        --light: #f5f5f6;
        --dark: #282c3f;
        --border: #d4d5d9;
        --gray: #696e79;
        --white: #ffffff;
        --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
        --transition: all 0.3s ease;
      }

      body {
        background-color: #f5f5f6;
        color: var(--secondary);
        padding: 0;
      }

      /* 导航容器 */
      .ecommerce-nav {
        background-color: var(--white);
        box-shadow: var(--shadow);
        position: sticky;
        top: 0;
        z-index: 1000;
      }

      /* 顶部导航栏 */
      .top-nav {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 40px;
        height: 80px;
        max-width: 1400px;
        margin: 0 auto;
      }

      /* Logo区域 */
      .logo-area {
        display: flex;
        align-items: center;
      }

      .logo {
        font-size: 28px;
        font-weight: 800;
        color: var(--primary);
        text-decoration: none;
      }

      .logo span {
        color: var(--secondary);
      }

      /* 分类导航 */
      .category-nav {
        flex-grow: 1;
        margin: 0 30px;
      }

      .nav-list {
        display: flex;
        list-style: none;
      }

      .nav-item {
        position: relative;
        margin: 0 15px;
      }

      .nav-link {
        display: flex;
        align-items: center;
        padding: 28px 5px;
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        color: var(--secondary);
        text-decoration: none;
        position: relative;
        transition: var(--transition);
      }

      .nav-link:hover {
        color: var(--primary);
      }

      .nav-link:hover::after {
        content: "";
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 4px;
        background-color: var(--primary);
      }

      /* 下拉菜单 */
      .dropdown {
        position: absolute;
        top: 100%;
        left: 0;
        width: 220px;
        background: var(--white);
        box-shadow: var(--shadow);
        border-radius: 0 0 4px 4px;
        opacity: 0;
        visibility: hidden;
        transform: translateY(10px);
        transition: var(--transition);
        z-index: 100;
      }

      .nav-item:hover .dropdown {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
      }

      .dropdown-link {
        display: block;
        padding: 12px 20px;
        color: var(--gray);
        text-decoration: none;
        font-size: 14px;
        transition: var(--transition);
      }

      .dropdown-link:hover {
        background: var(--light);
        color: var(--primary);
        padding-left: 25px;
      }

      /* 搜索区域 */
      .search-area {
        flex: 0 1 400px;
        position: relative;
      }

      .search-box {
        display: flex;
        height: 40px;
        background: var(--light);
        border-radius: 4px;
        overflow: hidden;
        border: 1px solid var(--border);
        transition: var(--transition);
      }

      .search-box:focus-within {
        border-color: var(--primary);
        box-shadow: 0 0 0 3px rgba(255, 63, 108, 0.1);
      }

      .search-input {
        flex: 1;
        border: none;
        background: transparent;
        padding: 0 15px;
        font-size: 14px;
        outline: none;
      }

      .search-btn {
        width: 60px;
        background: transparent;
        border: none;
        cursor: pointer;
        color: var(--gray);
        transition: var(--transition);
      }

      .search-btn:hover {
        color: var(--primary);
      }

      .suggestions {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--white);
        box-shadow: var(--shadow);
        border-radius: 0 0 4px 4px;
        z-index: 10;
        display: none;
      }

      .search-box:focus-within .suggestions {
        display: block;
      }

      .suggestion-title {
        padding: 12px 15px;
        font-size: 12px;
        color: var(--gray);
        border-bottom: 1px dashed var(--border);
      }

      .suggestion-list {
        list-style: none;
        padding: 8px 0;
      }

      .suggestion-item {
        padding: 8px 15px;
        font-size: 14px;
        cursor: pointer;
      }

      .suggestion-item:hover {
        background: var(--light);
      }

      /* 用户控制区 */
      .user-controls {
        display: flex;
        align-items: center;
        margin-left: 20px;
      }

      .control-item {
        position: relative;
        margin: 0 12px;
      }

      .control-link {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 12px;
        color: var(--gray);
        text-decoration: none;
        transition: var(--transition);
      }

      .control-link:hover {
        color: var(--primary);
      }

      .control-icon {
        font-size: 20px;
        margin-bottom: 4px;
      }

      .cart-count {
        position: absolute;
        top: -5px;
        right: -5px;
        background: var(--primary);
        color: white;
        font-size: 10px;
        width: 18px;
        height: 18px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      /* 移动端菜单按钮 */
      .mobile-menu-btn {
        display: none;
        font-size: 24px;
        background: none;
        border: none;
        color: var(--secondary);
        cursor: pointer;
      }

      /* 响应式设计 */
      @media (max-width: 1100px) {
        .top-nav {
          padding: 0 20px;
        }

        .nav-item {
          margin: 0 10px;
        }

        .search-area {
          flex: 0 1 300px;
        }
      }

      @media (max-width: 900px) {
        .top-nav {
          height: 70px;
        }

        .category-nav {
          display: none;
        }

        .mobile-menu-btn {
          display: block;
          margin-right: 15px;
        }

        .search-area {
          flex: 1;
          margin: 0 15px;
        }

        .logo {
          font-size: 24px;
        }

        .nav-link {
          padding: 20px 5px;
        }

        .control-link span {
          display: none;
        }

        .control-icon {
          margin-bottom: 0;
        }
      }

      @media (max-width: 480px) {
        .top-nav {
          padding: 0 15px;
        }

        .search-area {
          display: none;
        }

        .mobile-search-btn {
          display: block;
          background: none;
          border: none;
          font-size: 20px;
          color: var(--gray);
          margin-right: 15px;
        }
      }

      /* 内容区域用于展示导航效果 */
      .content {
        max-width: 1200px;
        margin: 40px auto;
        padding: 0 20px;
      }

      .hero {
        background: linear-gradient(135deg, #6a11cb 0%, #2575fc 100%);
        border-radius: 10px;
        padding: 80px 40px;
        text-align: center;
        color: white;
        margin-bottom: 40px;
      }

      .hero h1 {
        font-size: 2.5rem;
        margin-bottom: 20px;
      }

      .hero p {
        font-size: 1.2rem;
        max-width: 700px;
        margin: 0 auto 30px;
        opacity: 0.9;
      }

      .btn {
        display: inline-block;
        background: white;
        color: #2575fc;
        padding: 12px 30px;
        border-radius: 30px;
        text-decoration: none;
        font-weight: 600;
        transition: var(--transition);
      }

      .btn:hover {
        transform: translateY(-3px);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
      }

      .products {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 30px;
        margin-top: 40px;
      }

      .product-card {
        background: white;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: var(--shadow);
        transition: var(--transition);
      }

      .product-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
      }

      .product-img {
        height: 200px;
        background: #f5f5f6;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #ccc;
        font-size: 3rem;
      }

      .product-info {
        padding: 20px;
      }

      .product-title {
        font-size: 1.1rem;
        margin-bottom: 10px;
        color: var(--dark);
      }

      .product-price {
        font-weight: 700;
        color: var(--primary);
        font-size: 1.2rem;
        margin-bottom: 15px;
      }

      .product-meta {
        display: flex;
        justify-content: space-between;
        font-size: 0.9rem;
        color: var(--gray);
      }

      footer {
        background: var(--dark);
        color: white;
        padding: 40px 0;
        margin-top: 60px;
      }

      .footer-content {
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 40px;
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 30px;
      }

      .footer-column h3 {
        font-size: 1.2rem;
        margin-bottom: 20px;
        position: relative;
      }

      .footer-column h3::after {
        content: "";
        position: absolute;
        left: 0;
        bottom: -8px;
        width: 40px;
        height: 3px;
        background: var(--primary);
      }

      .footer-links {
        list-style: none;
      }

      .footer-links li {
        margin-bottom: 12px;
      }

      .footer-links a {
        color: #b4b4b7;
        text-decoration: none;
        transition: var(--transition);
      }

      .footer-links a:hover {
        color: var(--primary);
        padding-left: 5px;
      }

      .copyright {
        text-align: center;
        padding-top: 30px;
        color: #b4b4b7;
        font-size: 0.9rem;
      }
    </style>
  </head>
  <body>
    <!-- 电商导航系统 -->
    <nav class="ecommerce-nav">
      <div class="top-nav">
        <div class="logo-area">
          <button class="mobile-menu-btn">
            <i class="fas fa-bars"></i>
          </button>
          <a href="#" class="logo">
            Style
            <span>Shop</span>
          </a>
        </div>

        <div class="category-nav">
          <ul class="nav-list">
            <li class="nav-item">
              <a href="#" class="nav-link">女装</a>
              <div class="dropdown">
                <a href="#" class="dropdown-link">上装</a>
                <a href="#" class="dropdown-link">连衣裙</a>
                <a href="#" class="dropdown-link">裤装</a>
                <a href="#" class="dropdown-link">外套</a>
                <a href="#" class="dropdown-link">内衣</a>
              </div>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">男装</a>
              <div class="dropdown">
                <a href="#" class="dropdown-link">T恤</a>
                <a href="#" class="dropdown-link">衬衫</a>
                <a href="#" class="dropdown-link">裤装</a>
                <a href="#" class="dropdown-link">外套</a>
                <a href="#" class="dropdown-link">运动装</a>
              </div>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">鞋靴</a>
              <div class="dropdown">
                <a href="#" class="dropdown-link">运动鞋</a>
                <a href="#" class="dropdown-link">休闲鞋</a>
                <a href="#" class="dropdown-link">高跟鞋</a>
                <a href="#" class="dropdown-link">凉鞋</a>
                <a href="#" class="dropdown-link">靴子</a>
              </div>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">配饰</a>
              <div class="dropdown">
                <a href="#" class="dropdown-link">包包</a>
                <a href="#" class="dropdown-link">手表</a>
                <a href="#" class="dropdown-link">眼镜</a>
                <a href="#" class="dropdown-link">帽子</a>
              </div>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">美妆</a>
            </li>
            <li class="nav-item">
              <a href="#" class="nav-link">家居</a>
            </li>
          </ul>
        </div>

        <div class="search-area">
          <div class="search-box">
            <input type="text" class="search-input" placeholder="搜索时尚单品" />
            <button class="search-btn">
              <i class="fas fa-search"></i>
            </button>
          </div>
          <div class="suggestions">
            <div class="suggestion-title">热门搜索</div>
            <ul class="suggestion-list">
              <li class="suggestion-item">夏季连衣裙</li>
              <li class="suggestion-item">运动鞋</li>
              <li class="suggestion-item">防晒衣</li>
              <li class="suggestion-item">男士衬衫</li>
              <li class="suggestion-item">女士包包</li>
            </ul>
          </div>
        </div>

        <button class="mobile-search-btn">
          <i class="fas fa-search"></i>
        </button>

        <div class="user-controls">
          <div class="control-item">
            <a href="#" class="control-link">
              <i class="far fa-user control-icon"></i>
              <span>登录/注册</span>
            </a>
          </div>
          <div class="control-item">
            <a href="#" class="control-link">
              <i class="far fa-heart control-icon"></i>
              <span>收藏</span>
            </a>
          </div>
          <div class="control-item">
            <a href="#" class="control-link">
              <i class="fas fa-shopping-bag control-icon"></i>
              <span>购物车</span>
              <span class="cart-count">3</span>
            </a>
          </div>
        </div>
      </div>
    </nav>

    <!-- 内容区域用于展示效果 -->
    <div class="content">
      <div class="hero">
        <h1>夏季时尚狂欢节</h1>
        <p>精选上千款夏季新品，全场低至5折起，满299减50，更有跨店满减优惠等你来拿！</p>
        <a href="#" class="btn">立即抢购</a>
      </div>

      <h2 style="text-align: center; margin: 40px 0 30px">热卖商品推荐</h2>

      <div class="products">
        <div class="product-card">
          <div class="product-img">
            <i class="fas fa-tshirt"></i>
          </div>
          <div class="product-info">
            <h3 class="product-title">纯棉简约T恤 多色可选</h3>
            <div class="product-price">¥99</div>
            <div class="product-meta">
              <span>销量: 2543件</span>
              <span>好评率: 98%</span>
            </div>
          </div>
        </div>

        <div class="product-card">
          <div class="product-img">
            <i class="fas fa-shoe-prints"></i>
          </div>
          <div class="product-info">
            <h3 class="product-title">轻便透气运动鞋</h3>
            <div class="product-price">¥239</div>
            <div class="product-meta">
              <span>销量: 1846双</span>
              <span>好评率: 97%</span>
            </div>
          </div>
        </div>

        <div class="product-card">
          <div class="product-img">
            <i class="fas fa-vest"></i>
          </div>
          <div class="product-info">
            <h3 class="product-title">夏季轻薄防晒外套</h3>
            <div class="product-price">¥159</div>
            <div class="product-meta">
              <span>销量: 3267件</span>
              <span>好评率: 99%</span>
            </div>
          </div>
        </div>

        <div class="product-card">
          <div class="product-img">
            <i class="fas fa-ring"></i>
          </div>
          <div class="product-info">
            <h3 class="product-title">925银简约戒指</h3>
            <div class="product-price">¥189</div>
            <div class="product-meta">
              <span>销量: 845件</span>
              <span>好评率: 96%</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <footer>
      <div class="footer-content">
        <div class="footer-column">
          <h3>购物指南</h3>
          <ul class="footer-links">
            <li><a href="#">购物流程</a></li>
            <li><a href="#">会员介绍</a></li>
            <li><a href="#">常见问题</a></li>
            <li><a href="#">联系客服</a></li>
          </ul>
        </div>
        <div class="footer-column">
          <h3>配送方式</h3>
          <ul class="footer-links">
            <li><a href="#">上门自提</a></li>
            <li><a href="#">211限时达</a></li>
            <li><a href="#">配送服务查询</a></li>
            <li><a href="#">配送费收取标准</a></li>
          </ul>
        </div>
        <div class="footer-column">
          <h3>支付方式</h3>
          <ul class="footer-links">
            <li><a href="#">货到付款</a></li>
            <li><a href="#">在线支付</a></li>
            <li><a href="#">分期付款</a></li>
            <li><a href="#">公司转账</a></li>
          </ul>
        </div>
        <div class="footer-column">
          <h3>关注我们</h3>
          <ul class="footer-links">
            <li><a href="#">新浪微博</a></li>
            <li><a href="#">微信公众号</a></li>
            <li><a href="#">抖音</a></li>
            <li><a href="#">小红书</a></li>
          </ul>
        </div>
      </div>
      <div class="copyright">© 2025 StyleShop 时尚购物平台 版权所有</div>
    </footer>

    <script>
      // 简单的交互效果
      document.addEventListener("DOMContentLoaded", function () {
        // 移动端搜索按钮点击显示搜索框
        const mobileSearchBtn = document.querySelector(".mobile-search-btn")
        const searchArea = document.querySelector(".search-area")

        if (mobileSearchBtn && searchArea) {
          mobileSearchBtn.addEventListener("click", function () {
            searchArea.style.display = "block"
            searchArea.querySelector(".search-input").focus()
          })
        }

        // 点击页面其他地方隐藏搜索建议
        document.addEventListener("click", function (e) {
          if (!e.target.closest(".search-area")) {
            const suggestions = document.querySelector(".suggestions")
            if (suggestions) {
              suggestions.style.display = "none"
            }
          }
        })
      })
    </script>
  </body>
</html>
